<script setup lang="ts">
import { type PropType } from 'vue';

import { OMenuItem, OSubMenu } from '@opensig/opendesign';

import { type DocMenuT } from '@/@types/type-doc-menu.ts';
const emit = defineEmits(['change-sidebar']);

const props = defineProps({
  data: {
    type: Object as PropType<DocMenuT>,
    defalut: () => ({}),
  },
  depth: {
    type: Number,
    default: 1,
  },
});

// -------------------- 点击菜单跳转文档 --------------------
const changeSidebar = (href: string | undefined) => {
  emit('change-sidebar', href);
};

const goToPage = (href: string | undefined) => {
  changeSidebar(href);
};

// 上报菜单点击事件
const reportMenuClick = (ev: MouseEvent) => {
  let el = ev.target as HTMLElement;
  if (!el || el === ev.currentTarget) return;
  const docPath = [] as string[];
  do {
    if (el.classList.contains('o-menu-item')) {
      docPath.push(el.textContent!)
    } else if (el.classList.contains('o-sub-menu')) {
      docPath.push(el.firstChild!.textContent!)
    }
    el = el.parentElement!;
  } while (el !== null && !el.classList.contains('o-menu'));
  if (!docPath.length) return;
  return {
    detail: props.data?.href ?? '',
    ...docPath.reduceRight((acc, item, index) => {
      acc[`level${docPath.length - index}`] = item;
      return acc;
    }, {} as Record<string, string>)
  }
}
</script>

<template>
  <OSubMenu v-if="data.children && data.children.length" :value="data.id" :class="`menu-level-${depth}`">
    <template #title>{{ data.label }}</template>
    <template v-for="item in data.children" :key="item.href">
      <DocSubMenu :data="item" @change-sidebar="changeSidebar" :depth="depth + 1" />
    </template>
  </OSubMenu>
  <OMenuItem v-else-if="data.label" :value="data.href" v-analytics.bubble="reportMenuClick" @click="goToPage(data.href)" :class="`menu-level-${depth}`">{{ data.label }}</OMenuItem>
</template>

<style lang="scss" scoped>
.o-sub-menu {
  --sub-menu-color: var(--o-color-info2);
  --sub-menu-text-size: 16px;
  --sub-menu-text-height: 24px;
  &.o-sub-menu-associated-selected {
    --sub-menu-color-selected: var(--o-color-ubmc);
  }
}

:deep(.o-sub-menu-children) {
  margin-left: 12px;
  border-left: 1px solid var(--o-color-control4);
  .o-sub-menu-title {
    padding-left: var(--menu-padding-h) !important;
    --sub-menu-secondary-text-size: 16px;
    --sub-menu-secondary-text-height: 24px;
  }
}

.o-menu-item {
  --menu-item-color: var(--o-color-info2);
  --menu-item-bg-color-hover: var(--o-color-control2-light);
  --menu-item-bg-color-selected: var(--o-color-control3-light);
  @include respond-to('phone') {
    border-radius: 4px;
  }
  &.menu-level-1 {
    margin-left: 4px;
    padding-left: 7px !important;
    @include text2;
    font-weight: 500;
    color: var(--o-color-info1);
  }
  &.o-menu-item-selected {
    color: var(--o-color-ubmc);
  }
}

.o-menu-item:not(.o-sub-menu .o-menu-item) {
  padding: 8px 0 8px 4px;
}
.o-sub-menu-children {
  overflow: auto;
}
.o-sub-menu {
  .o-menu-item {
    padding: 8px 0 8px 7px !important;
    font-size: 16px;
    line-height: 24px;
    &.o-menu-item-selected {
      position: relative;
      &::before {
        width: 3px;
        height: 32px;
        content: '';
        background-color: var(--o-color-ubmc);
        position: absolute;
        top: 4px;
        right: 100%;
        transform: translateX(-2px) scaleX(0.75);
        z-index: 10;
        border-radius: 4px;
      }
    }
  }
  :deep(.o-sub-menu-title) {
    &:hover {
      color: var(--o-color-ubmc);
    }
  }
}
</style>
